<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消防主机（模拟）</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <style>
        #main {
            position: absolute;
            margin: auto;
            width: 70%;
            height: 80%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
<div class="card" id="main">
    <div class="card-header">
        <h5 style="text-align: center">模拟消防主机</h5>
    </div>
    <div class="card-body">
        <form id="form">
            <div class="row align-items-end">
                <div class="col-7">
                    <select class="form-select" id="func-select" aria-label="功能选择" name="functionCode">
                        <option selected value="60">系统信息</option>
                        <option value="70">故障信息</option>
                        <option value="80">分区信息</option>
                        <option value="90">探测器信息</option>
                        <option value="A0">灭火器信息</option>
                    </select>
                </div>
                <div class="col-2">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" checked role="switch" id="read-success"
                               name="isReadSuccess">
                        <label class="form-check-label" for="read-success" id="read-ind">读取成功</label>
                    </div>

                </div>
                <div class="col-2">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" checked role="switch" id="is-valid"
                               name="isValid">
                        <label class="form-check-label" for="is-valid" id="is-valid-ind">有效的数据</label>
                    </div>
                </div>
            </div>
            <div class="dropdown-divider" style="margin-bottom: 20px"></div>
            <div id="control-panel">
                <div id="60" class="sub_ctl">
                    <div class="row align-items-end">
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">总报警个数</label>
                                <input class="input-group-sm" value="0" name="alarmCount">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">总故障个数</label>
                                <input class="input-group-sm" value="0" name="faultCount">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">总探测器个数</label>
                                <input class="input-group-sm" value="0" name="detectorCount">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="70" class="sub_ctl">
                    <div class="row align-items-end">
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">防护区</label>
                                <input class="input-group-sm" value="0" name="protectZone">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">设备类型</label>
                                <input class="input-group-sm" value="0" name="deviceType">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">设备编号</label>
                                <input class="input-group-sm" value="0" name="deviceCode">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">故障码</label>
                                <input class="input-group-sm" value="0" name="faultCode">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="80" class="sub_ctl">
                    暂不支持
                </div>
                <div id="90" class="sub_ctl">
                    <div class="row align-items-end">
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">防护区</label>
                                <input class="input-group-sm" value="0" name="protectZone1">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">设备类型</label>
                                <input class="input-group-sm" value="0" name="equipmType">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">ID</label>
                                <input class="input-group-sm" value="0" name="Identity">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">报警等级</label>
                                <input class="input-group-sm" value="0" name="alarmLevel">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">温度</label>
                                <input class="input-group-sm" value="0" name="Temperature">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">CO</label>
                                <input class="input-group-sm" value="0" name="CO">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">VOC</label>
                                <input class="input-group-sm" value="0" name="VOC">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">烟雾</label>
                                <input class="input-group-sm" value="0" name="Smog">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="A0" class="sub_ctl">
                    <div class="row align-items-end">
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">防护区</label>
                                <input class="input-group-sm" value="0" name="protectZone2">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">编号</label>
                                <input class="input-group-sm" value="0" name="Number">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-switch">
                                <label class="form-check-label">状态</label>
                                <input class="input-group-sm" value="0" name="Status">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="position: absolute;left: 0;right: 0;margin: auto;bottom: 20px;text-align: center">
                <div class="dropdown-divider" style="margin-bottom: 10px"></div>
                <label class="form-check-label" for="ip">上位机IP</label>
                <input class="input-group-sm" id="ip" name="ip" value="127.0.0.1">
                <button type="submit" id="submit" class="btn btn-primary">上传数据</button>
                <div>
                    <label class="form-check-label" style="color: blue;font-weight: bold;margin-left: 10px"
                           id="status-label"></label>
                </div>
                <div>
                    <label class="form-check-label" style="color: red;font-weight: bold;margin-left: 10px;display: none"
                           id="status-label-error"></label>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        let myInterval;
        $("#submit").click(function () {
            $("#status-label").html("等待服务器响应...")
            clearInterval(myInterval) // close previous interval event
            myInterval = setInterval(function () {
                $.post({
                    url: "getFireEngineStatus",
                    success: function (res) {
                        $("#status-label").html(res)
                    }
                })
            }, 1000)
            $.post({
                url: "uploadRawData",
                data: $("#form").serializeArray(),
                success: function (res) {
                    if (res !== "ok") {
                        $("#status-label-error").show().html(res)
                    } else {
                        $("#status-label-error").hide()
                    }
                }
            })
            return false
        })

        // render
        {
            function render() {
                $(".sub_ctl").hide()
                // read status label
                if ($("#read-success").prop("checked")) {
                    $("#read-ind").html("读取成功")

                    // ControlPanel
                    $("#" + $("#func-select").val()).show()
                } else {
                    $("#read-ind").html("读取失败")
                }
            }

            render()
            $("#read-success").change(function () {
                render()
            })

            $("#func-select").change(function () {
                render()
            })


            $("#is-valid").change(function () {
                if ($("#is-valid").prop("checked")) {
                    $("#is-valid-ind").html("有效的数据")
                } else {
                    $("#is-valid-ind").html("无效的数据")
                }
            })
        }
    });
</script>
</body>
</html>